<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵详情 - 云灵</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .spirit-header {
            position: relative;
            height: 240px;
            overflow: hidden;
        }
        .spirit-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
        }
        .spirit-header-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            padding: 20px;
        }
        .spirit-avatar {
            width: 80px;
            height: 80px;
            border-radius: 40px;
            border: 3px solid white;
            overflow: hidden;
            margin-bottom: 10px;
            background-color: #e0f2f1;
        }
        .spirit-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .spirit-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 4px;
        }
        .spirit-type {
            opacity: 0.9;
            font-size: 14px;
        }
        .spirit-stats {
            display: flex;
            margin-top: 10px;
            gap: 16px;
        }
        .spirit-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .spirit-stat-value {
            font-weight: bold;
        }
        .spirit-stat-label {
            font-size: 12px;
            opacity: 0.8;
        }
        .spirit-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            background-color: white;
            position: sticky;
            top: 56px;
            z-index: 10;
        }
        .spirit-tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            color: #666;
            position: relative;
        }
        .spirit-tab.active {
            color: var(--primary-color);
            font-weight: bold;
        }
        .spirit-tab.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }
        .spirit-content {
            padding: 20px 16px;
        }
        .spirit-section {
            margin-bottom: 24px;
        }
        .spirit-section-title {
            font-weight: bold;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        .spirit-section-title i {
            margin-right: 8px;
            color: var(--primary-color);
        }
        .spirit-description {
            line-height: 1.6;
            color: #333;
        }
        .spirit-abilities {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 12px;
        }
        .spirit-ability {
            background-color: white;
            padding: 12px;
            border-radius: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .ability-name {
            font-weight: bold;
            display: flex;
            align-items: center;
            margin-bottom: 6px;
        }
        .ability-name i {
            margin-right: 6px;
            color: var(--primary-color);
        }
        .ability-desc {
            font-size: 13px;
            color: #666;
        }
        .spirit-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 12px;
        }
        .gallery-item {
            height: 100px;
            border-radius: 8px;
            overflow: hidden;
            background-color: #eee;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .related-spirits {
            margin-top: 12px;
        }
        .related-scroll {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            padding: 4px 0;
            -webkit-overflow-scrolling: touch;
        }
        .related-item {
            min-width: 120px;
            width: 120px;
            text-align: center;
        }
        .related-avatar {
            width: 70px;
            height: 70px;
            border-radius: 35px;
            margin: 0 auto 8px;
            overflow: hidden;
            background-color: #e0f2f1;
        }
        .related-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .related-name {
            font-weight: bold;
            font-size: 14px;
        }
        .related-type {
            font-size: 12px;
            color: #666;
        }
        .action-buttons {
            display: flex;
            gap: 10px;
            position: sticky;
            bottom: 70px;
            background-color: white;
            padding: 12px 16px;
            z-index: 10;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            margin: 0 -16px;
        }
        .action-buttons .btn {
            flex: 1;
        }
        .badge-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        .badge-item {
            display: flex;
            align-items: center;
            background-color: #f0f0f0;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 13px;
        }
        .badge-item i {
            margin-right: 6px;
            color: var(--primary-color);
        }
        .location-list {
            margin-top: 12px;
        }
        .location-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background-color: white;
            border-radius: 12px;
            margin-bottom: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .location-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: #e0f2f1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: var(--primary-color);
        }
        .location-info {
            flex: 1;
        }
        .location-name {
            font-weight: bold;
            margin-bottom: 2px;
        }
        .location-address {
            font-size: 12px;
            color: #666;
        }
        .spirit-stories {
            margin-top: 12px;
        }
        .story-item {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .story-title {
            font-weight: bold;
            margin-bottom: 8px;
        }
        .story-excerpt {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }
        .story-more {
            color: var(--primary-color);
            font-size: 13px;
            font-weight: bold;
            margin-top: 8px;
            display: block;
        }
        .collection-progress {
            height: 6px;
            background-color: #eee;
            border-radius: 3px;
            margin-top: 8px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background-color: var(--primary-color);
            width: 65%;
        }
    </style>
</head>
<body>
    <div class="app-header">
        <div class="header-title">精灵详情</div>
        <div class="header-actions">
            <i class="fas fa-share-alt"></i>
            <i class="fas fa-ellipsis-v"></i>
        </div>
    </div>

    <div class="spirit-header">
        <div class="spirit-cover"></div>
        <div class="spirit-header-overlay">
            <div class="spirit-avatar">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234CAF50'/%3E%3Cpath d='M30,30 L70,70 M70,30 L30,70' stroke='white' stroke-width='5'/%3E%3C/svg%3E" alt="云灵">
            </div>
            <div class="spirit-name">云灵</div>
            <div class="spirit-type">天门云使 · 虚拟导游</div>
            <div class="spirit-stats">
                <div class="spirit-stat">
                    <div class="spirit-stat-value">1.2k</div>
                    <div class="spirit-stat-label">喜欢</div>
                </div>
                <div class="spirit-stat">
                    <div class="spirit-stat-value">87%</div>
                    <div class="spirit-stat-label">推荐度</div>
                </div>
                <div class="spirit-stat">
                    <div class="spirit-stat-value">5.0</div>
                    <div class="spirit-stat-label">评分</div>
                </div>
            </div>
        </div>
    </div>

    <div class="spirit-tabs">
        <div class="spirit-tab active">详情</div>
        <div class="spirit-tab">故事</div>
        <div class="spirit-tab">觅踪</div>
        <div class="spirit-tab">互动</div>
    </div>

    <div class="app-content">
        <div class="spirit-section">
            <div class="spirit-section-title">
                <i class="fas fa-info-circle"></i>
                <span>精灵简介</span>
            </div>
            <div class="spirit-description">
                云灵是天门山守护精灵，天门洞的拟人化形象。她能操控云雾，引导游客探索张家界的奇山秀水。作为智能导游，云灵精通张家界地区的历史文化、地质知识，并能流利使用多种方言和外语与游客交流。
            </div>
            
            <div class="badge-list">
                <div class="badge-item">
                    <i class="fas fa-mountain"></i>
                    <span>天门山守护者</span>
                </div>
                <div class="badge-item">
                    <i class="fas fa-cloud"></i>
                    <span>云雾掌控</span>
                </div>
                <div class="badge-item">
                    <i class="fas fa-comments"></i>
                    <span>多语言精通</span>
                </div>
                <div class="badge-item">
                    <i class="fas fa-key"></i>
                    <span>天门钥匙持有者</span>
                </div>
            </div>
        </div>
        
        <div class="spirit-section">
            <div class="spirit-section-title">
                <i class="fas fa-bolt"></i>
                <span>特殊能力</span>
            </div>
            <div class="spirit-abilities">
                <div class="spirit-ability">
                    <div class="ability-name">
                        <i class="fas fa-cloud"></i>
                        <span>云海召唤</span>
                    </div>
                    <div class="ability-desc">能够召唤和控制云海，为游客创造梦幻景观</div>
                </div>
                <div class="spirit-ability">
                    <div class="ability-name">
                        <i class="fas fa-comments"></i>
                        <span>全能翻译</span>
                    </div>
                    <div class="ability-desc">精通各地方言和多国语言，实时翻译无障碍</div>
                </div>
                <div class="spirit-ability">
                    <div class="ability-name">
                        <i class="fas fa-compass"></i>
                        <span>天门引路</span>
                    </div>
                    <div class="ability-desc">利用云雾指引方向，游客永不迷路</div>
                </div>
                <div class="spirit-ability">
                    <div class="ability-name">
                        <i class="fas fa-history"></i>
                        <span>时光回溯</span>
                    </div>
                    <div class="ability-desc">展示景区历史场景的AR重现</div>
                </div>
            </div>
        </div>
        
        <div class="spirit-section">
            <div class="spirit-section-title">
                <i class="fas fa-map-marker-alt"></i>
                <span>出没地点</span>
            </div>
            <div class="location-list">
                <div class="location-item">
                    <div class="location-icon">
                        <i class="fas fa-mountain"></i>
                    </div>
                    <div class="location-info">
                        <div class="location-name">天门山</div>
                        <div class="location-address">湖南省张家界市永定区天门山景区</div>
                    </div>
                    <i class="fas fa-chevron-right"></i>
                </div>
                <div class="location-item">
                    <div class="location-icon">
                        <i class="fas fa-archway"></i>
                    </div>
                    <div class="location-info">
                        <div class="location-name">天门洞</div>
                        <div class="location-address">天门山山腰处的巨大洞穴</div>
                    </div>
                    <i class="fas fa-chevron-right"></i>
                </div>
                <div class="location-item">
                    <div class="location-icon">
                        <i class="fas fa-cable-car"></i>
                    </div>
                    <div class="location-info">
                        <div class="location-name">天门山索道</div>
                        <div class="location-address">天门山景区入口至山顶索道沿线</div>
                    </div>
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </div>
        
        <div class="spirit-section">
            <div class="spirit-section-title">
                <i class="fas fa-images"></i>
                <span>精灵图库</span>
            </div>
            <div class="spirit-gallery">
                <div class="gallery-item">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%234CAF50'/%3E%3Ccircle cx='100' cy='100' r='50' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="云灵形象">
                </div>
                <div class="gallery-item">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%232196F3'/%3E%3Cpath d='M50,150 C50,100 150,100 150,150' stroke='white' stroke-width='5' fill='none'/%3E%3Cpath d='M100,50 L100,150' stroke='white' stroke-width='5' fill='none'/%3E%3C/svg%3E" alt="云灵形象">
                </div>
                <div class="gallery-item">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23673AB7'/%3E%3Ccircle cx='70' cy='80' r='30' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='130' cy='80' r='30' fill='white' fill-opacity='0.5'/%3E%3Cpath d='M70,120 L130,120' stroke='white' stroke-width='5' fill='none'/%3E%3C/svg%3E" alt="云灵形象">
                </div>
                <div class="gallery-item">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23FFEB3B'/%3E%3Cpath d='M50,100 L150,100 M100,50 L100,150' stroke='white' stroke-width='10' stroke-opacity='0.7'/%3E%3C/svg%3E" alt="云灵形象">
                </div>
                <div class="gallery-item">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23009688'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='white' stroke-width='5'/%3E%3Ccircle cx='100' cy='100' r='30' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E" alt="云灵形象">
                </div>
                <div class="gallery-item">
                    <div style="width:100%;height:100%;background-color:#4CAF50;display:flex;justify-content:center;align-items:center;color:white;">
                        <i class="fas fa-plus fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="spirit-section">
            <div class="spirit-section-title">
                <i class="fas fa-users"></i>
                <span>相关精灵</span>
            </div>
            <div class="related-spirits">
                <div class="related-scroll">
                    <div class="related-item">
                        <div class="related-avatar">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23FF9800'/%3E%3Cpath d='M30,70 L50,30 L70,70 Z' fill='white'/%3E%3C/svg%3E" alt="张峰林">
                        </div>
                        <div class="related-name">张峰林</div>
                        <div class="related-type">峰林侠</div>
                    </div>
                    <div class="related-item">
                        <div class="related-avatar">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%232196F3'/%3E%3Cpath d='M25,50 Q50,25 75,50 Q50,75 25,50' fill='white'/%3E%3C/svg%3E" alt="溪儿">
                        </div>
                        <div class="related-name">溪儿</div>
                        <div class="related-type">金鞭溪灵</div>
                    </div>
                    <div class="related-item">
                        <div class="related-avatar">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%239C27B0'/%3E%3Cpath d='M35,35 L65,65 M65,35 L35,65' stroke='white' stroke-width='5'/%3E%3C/svg%3E" alt="渊瞳">
                        </div>
                        <div class="related-name">渊瞳</div>
                        <div class="related-type">神堂湾幽影</div>
                    </div>
                    <div class="related-item">
                        <div class="related-avatar">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23009688'/%3E%3Ccircle cx='50' cy='40' r='15' fill='white'/%3E%3Cpath d='M30,70 Q50,90 70,70' fill='white'/%3E%3C/svg%3E" alt="定海">
                        </div>
                        <div class="related-name">定海</div>
                        <div class="related-type">黄龙洞主</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="spirit-section">
            <div class="spirit-section-title">
                <i class="fas fa-trophy"></i>
                <span>收集进度</span>
            </div>
            <div>已收集张家界精灵：32/50</div>
            <div class="collection-progress">
                <div class="progress-fill"></div>
            </div>
        </div>
        
        <div class="action-buttons">
            <button class="btn btn-primary">
                <i class="fas fa-comment-alt"></i> 开始对话
            </button>
            <button class="btn btn-secondary">
                <i class="fas fa-camera"></i> AR互动
            </button>
        </div>
    </div>

    <div class="bottom-nav">
        <div class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-map-marked-alt"></i>
            <span>地图</span>
        </div>
        <div class="nav-item active">
            <i class="fas fa-dragon"></i>
            <span>精灵</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-robot"></i>
            <span>导游</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 